<template>
  <baidu-map
    class="map"
    :center="mapdata.center"
    :zoom="15"
    :scroll-wheel-zoom="true"
    mapType="BMAP_NORMAL_MAP"
    :style="{'height':height}"
  >
    <div v-for="(it,index) in mapdata.marker_Data" :key="index">
      <bm-marker
        :position="it.position"
        :dragging="false"
        @click="ckin(it,index)"
        @mouseover="infoWindowOpen(it,index)"
        @mouseout="infoWindowClose(it,index)"
        :icon="it.icon?{url: 'http://www.kouhaobang.com/images/video.png', size: {width: 20, height: 20}}:{url: 'http://www.kouhaobang.com/images/video1.png', size: {width: 20, height: 20}}"
        :animation="it.id==report_id?'BMAP_ANIMATION_BOUNCE':''"
      >
      
        <bm-info-window
          :show="it.id===cur_id"
          :title="it.title"
          @close="infoWindowClose(it,index)"
        >
          <p v-html="it.msg"></p>
        </bm-info-window>
      </bm-marker>
      <bm-label  :content="it.title" :position="it.position" :labelStyle="{border:'1px solid #13227a',color: '#13227a', fontSize : '12px'}" :title="it.title"/>
    </div>
  </baidu-map>
</template>
<script>
import mapdata from "@/utils/mapdata2.js";
export default {
  props: ["height", "type",'from_report_id'],
  data() {
    return {
      cur_id: 0,
      mapdata: {},
      report_id:0
    };
  },
  watch:{
      type(val) {
        this.getMapData(val);
      },
      from_report_id(val) {
        this.report_id = val;
        console.log(this.report_id)
      }
  },
  created() {
    this.getMapData("A");
  },
  methods: {
    // 获取地图数据
    getMapData(t) {
      this.mapdata = mapdata[t];
      console.log(mapdata)
    },
    infoWindowClose(it, index) {
      this.cur_id = 0;
    },
    infoWindowOpen(it, index) {
      this.cur_id = it.id;
    },
    ckin(it, index){
      let text= ''
      if(it.icon){
        text = '前往视频监控页面'
      }else{
        text = '离线视频'
      }
      this.$confirm(it.icon?'前往视频监控页面':'离线视频').then(_ => {
        it.icon && this.$router.push('/videoControl/show/'+it.id)
        done();
      }).catch(_ => {});
    }
  }
};
</script>
<style >
.anchorBL{
  display:none;
}
</style>
